<template>
	<div class="notice_list_wrapper">
		<div class="headbox">
			<h2>通知公告</h2>
		</div>
		<div class="filter">
			<h2>分类</h2>
			<el-radio-group v-model="classifyId">
				<el-radio label="">全部</el-radio>
				<el-radio v-for="(item, index) in classifyData" :key="index" :label="item.id">{{ item.name }}</el-radio>
			</el-radio-group>
		</div>
		<div class="list">
			<dl v-for="(item, index) in listDatas" :key="index">
				<dt><span></span></dt>
				<dd>
					<h4>
						<font color="#f60" v-if="!!item.typeName">【{{ item.typeName }}】</font>
						<router-link :to="{ path: `${routerPath}/${item.id}` }">{{ item.title }}</router-link>
					</h4>
					<p>
						<span>{{ item.pubDate }}</span>
						<i class="el-icon-view">{{ item.clickCount }}</i>
					</p>
				</dd>
			</dl>
		</div>
		<sw-pagination :total="dataCount" :page.sync="listQuery.page" :limit.sync="listQuery.limit" notice="数据" @change="getNewsListData"></sw-pagination>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
import { getOpenApiClassify } from '@/api/system/classify';
export default {
	data() {
		return {
			dataCount: 0,
			listQuery: {
				page: 1,
				limit: 10
			},
			classifyData: [],
			listDatas: [],
			classifyId: ''
		};
	},
	computed: {
		routerPath() {
			return this.$route.path;
		}
	},
	watch: {
		classifyId() {
			this.getNewsListData();
		}
	},
	async mounted() {
		await this.getClassifyData();
		this.getNewsListData();
	},
	methods: {
		...mapActions(['getNewsData']),

		//获取栏目分类数据
		async getClassifyData() {
			let result = await getOpenApiClassify({ classType: '1', createBy: '1', status: '1' }).then((res) => res.data);
			if (result.code === '0') {
				this.classifyData = !result.data ? [] : result.data;
			}
		},

		//获取文件机关动态数据
		async getNewsListData() {
			let params = { ...this.listQuery, classifyId: '209' };
			if (!this.classifyId) {
				params['executiveEditorList'] = this.classifyData.map((item) => item.id).join();
			} else {
				params['executiveEditorList'] = this.classifyId;
			}
			this.getNewsData(params).then((res) => {
				let datas = !res.data ? [] : res.data;
				this.dataCount = parseInt(res.count);
				this.listDatas = datas.map((item) => {
					let typeInfo = this.classifyData.find((v) => v.id === item.executiveEditor);
					return { ...item, typeName: !typeInfo ? '' : typeInfo.name };
				});
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.notice_list_wrapper {
	padding-bottom: 64px;
	.headbox {
		display: flex;
		align-items: center;
		padding: 0 15px;
		height: 72px;
		background: url('../../assets/img/bg_headbox.png') no-repeat center;
		border: solid 1px #f4f4f4;
		h2 {
			font-size: 24px;
			line-height: 66px;
			font-weight: bold;
			font-family: 'simsun';
			color: #357c65;
			border-bottom: solid 3px #357c65;
			padding-top: 3px;
		}
	}
	.filter ::v-deep {
		display: flex;
		align-items: center;
		height: 60px;
		border: solid 1px #f4f4f4;
		border-top: none;
		h2 {
			flex-shrink: 0;
			font-size: 16px;
			font-weight: normal;
			line-height: 60px;
			padding: 0 15px;
			border-right: solid 1px #f4f4f4;
		}
		.el-radio-group {
			margin-left: 15px;
		}
		.el-radio__label {
			font-size: 16px;
		}
	}
	.list {
		flex: 1;
		overflow: hidden;
		padding-bottom: 40px;

		dl {
			display: flex;
			align-items: flex-start;
			padding: 10px 0;
			border-bottom: solid 1px #e7e7e7;
		}

		dt {
			margin-right: 15px;

			span {
				display: block;
				width: 8px;
				height: 8px;
				margin-top: 23px;
				border-radius: 50%;
				background-color: #357c65;
			}

			img {
				display: block;
				width: 128px;
				height: 96px;
				object-fit: cover;
			}
		}

		dd {
			flex: 1;
			padding: 10px 0;
			overflow: hidden;
		}

		h4 {
			height: 32px;
			line-height: 32px;
			font-size: 20px;
			font-weight: normal;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;

			a {
				color: #333;
				text-decoration: none;

				&:hover {
					color: #357c65;
					border-bottom: solid 1px #357c65;
				}
			}
		}

		p {
			color: rgba(0, 0, 0, 0.3);
			margin-top: 24px;

			span {
				margin-right: 20px;
			}

			i.el-icon-view::before {
				margin-right: 6px;
			}
		}
	}
}
</style>
